<style>
body {
    margin: 0;
}

.el-header {
    height: 50px;
    background-color: #545c64;
    position: relative;
}

.el-header .ul_li {
    margin-top: 15px;
}

.el-header .ul_li li {
    list-style: none;
    float: right;
    padding-left: 15px;
    color: white;
    font-weight: bolder;
    font-size: 16px;
    cursor: pointer;
}

//搜索框

.input-with-select .el-input-group__prepend {
    background-color: var(--el-fill-color-blank);
}

//轮播图
.el-carousel__item h3 {
    display: flex;
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;

}

.el-carousel__item:nth-child(2n) {
    background-image: url("http://127.0.0.1:8081/lunbo/1.jpg");
}

.el-carousel__item:nth-child(2n + 1) {
    background-image: url("http://127.0.0.1:8081/lunbo/2.jpg");
}

.el-main .container_1 {
    width: 1280px;
    margin: 0 auto;
}


.el-footer {
    height: 160px;
    background-color: #545c64;
    position: relative;
}
</style>
<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="4">
                    </el-col>
                    <el-col :span="3">
                    </el-col>
                    <el-col :span="3">
                    </el-col>
                    <el-col :span="10">
                        <ul class="ul_li">
                            <li>
                                <router-link to="/personal" style="text-decoration-line: none;color: #fff">
                                    <span v-show="personal" >个人信息</span>
                                </router-link>

                                <span v-show="logOut" style="padding-left: 50px" @click="signOut">退出</span>
                            </li>
                            <li>
                                <img :src="`http://127.0.0.1:8081/avatar/${avatar}`"
                                     style="width: 21px;height: 21px;border-radius: 50%" v-show="pic">
                            </li>
                            <li>
                                <span @click="signIn= true" v-show="sIn">登录</span>
                            </li>
                            <li>
                                <span @click="signUp = true" v-show="sUp">注册</span>
                            </li>
                        </ul>
                    </el-col>
                </el-row>
                <el-dialog v-model="signIn" title="登录" width="30%" center>
                    <el-from :model="signInForm" label-width="80px">
                        <el-form-item label="">
                            <el-input type="text" v-model="signInForm.username" placeholder="username"/>
                        </el-form-item>
                        <el-form-item label="">
                            <el-input type="password" v-model="signInForm.password" placeholder="password"
                                      show-password/>
                        </el-form-item>
                        <div class="mb-2 flex items-center text-sm" style="margin-bottom: 10px">
                            <el-radio-group v-model="radio" class="ml-4">
                                <el-radio label="1" size="large" @change="getRadio()">用户登录</el-radio>
                                <el-radio label="0" size="large" @change="getRadio()">店铺管理员登录</el-radio>
                            </el-radio-group>
                        </div>
                        <el-from-item style="margin-top: 10px">
                            <el-button type="primary" @click="onSignInForm()">登录</el-button>
                        </el-from-item>
                    </el-from>
                </el-dialog>
                <el-dialog v-model="signUp" title="用户注册" width="30%" center>
                    <el-form :model="signUpForm" label-width="80px">
                        <el-form-item label="用户名">
                            <el-input v-model="signUpForm.username" placeholder="username"/>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input type="password" v-model="signUpForm.password" placeholder="password"
                                      show-password/>
                        </el-form-item>
                        <el-form-item label="手机号">
                            <el-input type="text" v-model="signUpForm.telephone" placeholder="telephone"/>
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <el-input type="email" v-model="signUpForm.email" placeholder="email"/>
                        </el-form-item>
                        <el-form-item label="生日">
                            <el-input type="date" v-model="signUpForm.birthday" placeholder="birthday"/>
                        </el-form-item>
                        <el-form-item label="头像">
                            <el-upload
                                    v-model:file-list="fileList"
                                    :auto-upload="false"
                                    :limit="1"
                            >
                                <el-button style="background: #f5f3ef">上传图片</el-button>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                    <el-button type="primary" style="margin-left: 40px" @click="onSignUpForm()">注册</el-button>
                </el-dialog>
            </el-header>
            <el-main style="padding: 0">
                <!-- 搜索框 -->
                <el-row style="margin:10px 0px 10px 0px" :model="input3">
                    <el-col :span="9"></el-col>
                    <el-col :span="6">
                        <el-input
                                v-model="input3.title"
                                placeholder="Please input"
                                class="input-with-select"
                        >
                            <template #append>
                                <el-button @click="search">搜索</el-button>
                            </template>
                        </el-input>
                    </el-col>
                    <el-col :span="4">
                        <el-icon size="25px" style="margin: 3px 0px 0px 6px">
                            <router-link to="/shopCar"><ShoppingCart/></router-link>
                        </el-icon>
                    </el-col>
                </el-row>
                <el-carousel indicator-position="outside" style="margin:0 auto;width: 1280px">
                    <el-carousel-item v-for="item in 2" :key="item" style="width: 1280px;height:450px;">
                    </el-carousel-item>
                </el-carousel>
                <div class="container_1">
                    <div>
                        <el-menu
                            class="el-menu-demo"
                            mode="horizontal"
                        >

                            <el-sub-menu index="1">
                                <template #title><span @click="kind1()">电子设备</span></template>
                                <el-sub-menu index="1-1">
                                    <template #title><span @click="kind2()">电脑</span></template>
                                    <el-menu-item index="1-1-1"><span @click="kind3()">联想系列</span></el-menu-item>
                                </el-sub-menu>
                                <el-sub-menu index="1-2">
                                    <template #title><span @click="kind4()">手机</span></template>
                                    <el-menu-item index="1-1-1"><span @click="kind5()">小米系列</span></el-menu-item>
                                    <el-menu-item index="1-1-1"><span @click="kind6()">华为系列</span></el-menu-item>
                                </el-sub-menu>
                            </el-sub-menu>
                            <el-sub-menu index="2">
                                <template #title><span @click="kind7()">服装</span></template>
                                <el-sub-menu index="2-1">
                                    <template #title><span @click="kind8()">男士</span></template>
                                    <el-menu-item index="2-1-1"><span @click="kind9()">外套</span></el-menu-item>
                                    <el-menu-item index="2-1-2"><span @click="kind10()">衬衣</span></el-menu-item>
                                </el-sub-menu>
                                <el-sub-menu index="2-2">
                                    <template #title><span @click="kind11()">女士</span></template>
                                    <el-menu-item index="2-2-1"><span @click="kind12()">外套</span></el-menu-item>
                                    <el-menu-item index="2-2-2"><span @click="kind13()">裙子</span></el-menu-item>
                                </el-sub-menu>
                            </el-sub-menu>
                            <el-sub-menu index="3">
                                <template #title><span @click="kind14()">食品</span></template>
                                <el-sub-menu index="3-1">
                                    <template #title><span @click="kind15()">速食</span></template>
                                    <el-menu-item index="3-1-1"><span @click="kind16()">方便面</span></el-menu-item>
                                </el-sub-menu>
                                <el-sub-menu index="3-2">
                                    <template #title><span @click="kind17()">果蔬</span></template>
                                    <el-menu-item index="3-2-1"><span @click="kind18()">水果</span></el-menu-item>
                                </el-sub-menu>
                            </el-sub-menu>
                        </el-menu>
                    </div>
                    <el-row gutter="20">
                        <el-col :span="6" v-for="product in products" :key="product">
                            <el-card class="product-card" :id="product.id" @click="handClick(product.id)">
                                <div class="info">
                                    <el-image class="product-picture"
                                              :src="`http://127.0.0.1:8081/product/${product.picture }`"></el-image>
                                    <div>
                                        <el-text type="info" truncated style="display:none;">
                                            {{ product.id }}
                                        </el-text>
                                    </div>
                                    <div>
                                        <el-text type="info" truncated>{{ product.title}}</el-text>
                                    </div>
                                    <div>
                                        <el-text type="info" truncated>{{ product.description }}</el-text>
                                    </div>
                                    <div>
                                        <el-space>
                                            <el-text type="danger">￥{{ product.new_price }}</el-text>
                                        </el-space>
                                    </div>
                                </div>
                            </el-card>
                        </el-col>
                    </el-row>
                </div>

            </el-main>
            <el-footer>
                <h3 style="text-align: center">2023&copy;电商平台</h3>
            </el-footer>
        </el-container>
    </div>
</template>
<script setup>
import {ref, reactive, toRaw} from 'vue'
import userApi from '../api/userApi.js'
import axios from 'axios'
import {ElMessage} from "element-plus";
import router from '../router/index.js'
import goodsApi from "../api/goods.js";

const signUp = ref(false)
const signIn = ref(false)
const sIn = ref(true)
const sUp = ref(true)
const personal = ref(false);
const pic = ref(false);
const signUpForm = reactive({
    username: '',
    password: '',
    email: '',
    telephone: '',
    birthday: '',
    avatar: ''

})
const fileList = ref([])
const type = {type: 'application/json'}
const heards = {withCredentials: true}
const input3 = reactive({
    title:''
})

const search  = async () =>{
    console.log(input3.title)
    const res = await goodsApi.queryByTitle(input3)
    products.value = res.data
}

// localStorage.removeItem('token1')
const onSignUpForm = async () => {
    signUpForm.files = fileList
    signUpForm.file = signUpForm.files[0].raw
    signUpForm.user = new Blob([JSON.stringify(toRaw(signUpForm))], type)
    const res = await userApi.create(signUpForm)
    if (res.data) {
        ElMessage.success('注冊成功');
        signUp.value = false;
    } else {
        ElMessage.error('请登录');
    }

}
const signInForm = reactive({
    username: '',
    password: ''
})

const radio = ref(
    '1'
);
const getRadio = () => {
    radio.value
    console.log(radio.value)
}
const avatar = ref('');
const logOut = ref(false);

const onSignInForm = () => {
        if (signInForm.username.length === 0) {
            confirm("请输入用户名");
        } else {
            if (signInForm.password.length == 0) {
                alert("请输入密码");
            } else {
                if (radio.value == "1") {
                    axios.post('http://127.0.0.1:8080/user/queryByAccountAndPassword', signInForm).then(res => {
                        // console.log(res.data);
                        const token1 = res.data.token;
                        console.log(token1);
                        if (res.data) {
                            alert("登录成功");
                            localStorage.setItem("token1",token1);
                            console.log(localStorage.getItem('token1'));
                            signIn.value = false;
                            sIn.value = false;
                            sUp.value = false;
                            logOut.value = true;
                            personal.value = true;
                            pic.value = true
                            avatar.value = res.data.avatar;
                        } else {
                            alert("登录失败")
                        }
                    }).catch(error => {
                        console.log(error)
                    })
                }
                if (radio.value == "0") {
                    axios.post('http://127.0.0.1:8080/store/queryByAccountAndPassword', signInForm).then(res => {
                        if (res.data) {
                            // console.log(token);
                            // localStorage.setItem("token",token);
                            // console.log(localStorage.getItem("token"));
                            router.push({
                                path:'/admin'
                            })
                        } else {
                            alert("登录失败")
                        }
                    }).catch(error => {
                        console.log(error)
                    })
                }
            }
        }
}

// 首页图片展示
const products = ref([]);
axios.get('http://127.0.0.1:8080/product/queryAll')
    .then(res => {
        products.value = res.data
    }).catch(err => {
    console.error(err)
})

const handClick=(id)=> {
    console.log(id)
    router.push({
        path: '/detail',
        query: {
            pid: id
        }
    })
}

console.log(localStorage.getItem('token1'))

if(localStorage.getItem("token1")){
    let uid = ref('');
    const userToken = localStorage.getItem('token1');
    const payload = userToken.split('.')[1]
    const data = JSON.parse(decodeURIComponent(escape(window.atob(payload.replace(/-/g, "+").replace(/_/g, "/")))))
    uid = data.sub;
    axios.get('http://127.0.0.1:8080/user/queryById/' + uid)
        .then(res =>{
            sIn.value = false;
            sUp.value = false;
            logOut.value = true;
            personal.value = true;
            pic.value = true
            avatar.value = res.data.avatar;
        })
}

const signOut = async () => {
    console.log(111)
    const res = await userApi.signOut()
    console.log(res.data)
    if (res.data) {
        localStorage.removeItem('token1')
        console.log(localStorage.getItem('token1'));
        window.location.reload()
    } else {
        //
    }
}

// #######################电子设备############################
const kindForm1 = reactive({
    first:'电子设备'
})
const kind1 = async() =>{
    const res = await goodsApi.queryByFirst(kindForm1)
    if(res.data){
        products.value = res.data
    }
}

const kindForm2 = reactive({
    first:'电子设备',
    second:'电脑'
})
const kind2 = async() =>{
    const res = await goodsApi.queryBySecond(kindForm2)
    if(res.data){
        products.value = res.data
    }
}

const kindForm3 = reactive({
    first:'电子设备',
    second:'电脑',
    third:'联想系列'
})
const kind3 = async() =>{
    const res = await goodsApi.queryByThird(kindForm3)
    if(res.data){
        products.value = res.data
    }
}

const kindForm4 = reactive({
    first:'电子设备',
    second:'手机'
})
const kind4 = async() =>{
    const res = await goodsApi.queryBySecond(kindForm4)
    if(res.data){
        products.value = res.data
    }
}

const kindForm5 = reactive({
    first:'电子设备',
    second:'手机',
    third:'小米系列'
})
const kind5 = async() =>{
    const res = await goodsApi.queryByThird(kindForm5)
    if(res.data){
        products.value = res.data
    }
}

const kindForm6 = reactive({
    first:'电子设备',
    second:'手机',
    third:'华为系列'
})
const kind6 = async() =>{
    const res = await goodsApi.queryByThird(kindForm6)
    if(res.data){
        products.value = res.data
    }
}

const kindForm7 = reactive({
    first:'服装'
})
const kind7 = async() =>{
    const res = await goodsApi.queryByFirst(kindForm7)
    if(res.data){
        products.value = res.data
    }
}

const kindForm8 = reactive({
    first:'服装',
    second:'男士'
})
const kind8 = async() =>{
    const res = await goodsApi.queryBySecond(kindForm8)
    if(res.data){
        products.value = res.data
    }
}

const kindForm9 = reactive({
    first:'服装',
    second:'男士',
    third:'外套'
})
const kind9 = async() =>{
    const res = await goodsApi.queryByThird(kindForm9)
    if(res.data){
        products.value = res.data
    }
}

const kindForm10 = reactive({
    first:'服装',
    second:'男士',
    third:'衬衣'
})
const kind10 = async() =>{
    const res = await goodsApi.queryByThird(kindForm10)
    if(res.data){
        products.value = res.data
    }
}

const kindForm11 = reactive({
    first:'服装',
    second:'女士'
})
const kind11 = async() =>{
    const res = await goodsApi.queryBySecond(kindForm11)
    if(res.data){
        products.value = res.data
    }
}

const kindForm12 = reactive({
    first:'服装',
    second:'女士',
    third:'外套'
})
const kind12 = async() =>{
    const res = await goodsApi.queryByThird(kindForm12)
    if(res.data){
        products.value = res.data
    }
}

const kindForm13 = reactive({
    first:'服装',
    second:'女士',
    third:'裙子'
})
const kind13 = async() =>{
    const res = await goodsApi.queryByThird(kindForm13)
    if(res.data){
        products.value = res.data
    }
}

const kindForm14 = reactive({
    first:'食品'
})
const kind14 = async() =>{
    const res = await goodsApi.queryByFirst(kindForm14)
    if(res.data){
        products.value = res.data
    }
}

const kindForm15 = reactive({
    first:'食品',
    second:'速食'
})
const kind15 = async() =>{
    const res = await goodsApi.queryBySecond(kindForm15)
    if(res.data){
        products.value = res.data
    }
}

const kindForm16 = reactive({
    first:'食品',
    second:'速食',
    third:'方便面'
})
const kind16 = async() =>{
    const res = await goodsApi.queryBySecond(kindForm16)
    if(res.data){
        products.value = res.data
    }
}

const kindForm17 = reactive({
    first:'食品',
    second:'果蔬'
})
const kind17 = async() =>{
    const res = await goodsApi.queryBySecond(kindForm17)
    if(res.data){
        products.value = res.data
    }
}

const kindForm18 = reactive({
    first:'食品',
    second:'果蔬',
    third:'水果'
})
const kind18 = async() =>{
    const res = await goodsApi.queryBySecond(kindForm18)
    if(res.data){
        products.value = res.data
    }
}



</script>